{% extends 'admin_dashboard.html' %}
{% block title %}银行卡管理{% endblock %}

{% block content %}
<div style="max-width: 1200px; margin: 20px auto; padding: 0 20px;">
  <div class="d-flex align-items-center mb-4" style="font-size: 20px; font-weight: bold; color: #333;">
    <i class="bi bi-credit-card" style="font-size: 26px; color: #3f51b5; margin-right: 10px;"></i>
    银行卡管理
  </div>

  <!-- 查询卡片 -->
  <div class="card mb-4 p-4">
    <div class="d-flex align-items-center mb-3" style="font-size: 20px; font-weight: bold; color: #333;">
      <i class="bi bi-search" style="font-size: 24px; color: #3f51b5; margin-right: 10px;"></i>
      🔍查询银行卡
    </div>

    {% if error %}
      <div class="alert alert-warning">{{ error }}</div>
    {% endif %}

    <form method="GET" action="{{ url_for('cards') }}" class="row gy-2 gx-3">

      <div class="col-sm-3">
        <label class="form-label">查询模式</label>
        <select name="mode" id="mode-select" class="form-select">
          <option value="">-- 请选择 --</option>
          <option value="exact" {{ 'selected' if mode == 'exact' }}>精确查询</option>
          <option value="fuzzy" {{ 'selected' if mode == 'fuzzy' }}>模糊查询</option>
          <option value="range" {{ 'selected' if mode == 'range' }}>范围查询</option>
        </select>
      </div>

      <div class="col-sm-3">
        <label class="form-label">字段</label>
        <select name="field" id="field-select" class="form-select">
          <option value="">-- 请选择 --</option>
          <option value="cardID" {{ 'selected' if field == 'cardID' }}>卡号</option>
          <option value="curID" {{ 'selected' if field == 'curID' }}>币种</option>
          <option value="openDate" {{ 'selected' if field == 'openDate' }}>开卡日期</option>
          <option value="openMoney" {{ 'selected' if field == 'openMoney' }}>开卡金额</option>
          <option value="balance" {{ 'selected' if field == 'balance' }}>账户余额</option>
          <option value="IsReportLoss" {{ 'selected' if field == 'IsReportLoss' }}>是否挂失</option>
          <option value="customerID" {{ 'selected' if field == 'customerID' }}>客户编号</option>
          <option value="savingID" {{ 'selected' if field == 'savingID' }}>存款编号</option>
          <option value="pass" disabled>取款密码（不可查询）</option>
        </select>
      </div>

      <!-- 精确/模糊查询 输入框 -->
      <div class="col-sm-4" id="value-container" style="display: none;">
        <label class="form-label">查询值</label>
        <input type="text" id="input-value" name="value" class="form-control" placeholder="请输入查询值" value="{{ value }}">
      </div>

      <!-- 范围查询 输入框 -->
      <div class="col-sm-4" id="range-container" style="display: none;">
        <label class="form-label">上限 / 下限</label>
        <div class="d-flex gap-2">
          <input type="text" name="low" class="form-control" placeholder="上限" value="{{ low }}">
          <input type="text" name="high" class="form-control" placeholder="下限" value="{{ high }}">
        </div>
      </div>

      <!-- 按钮单独一行 -->
      <div class="col-12 mt-3">
        <button type="submit" class="btn btn-gray me-2">查询</button>
        <a href="{{ url_for('cards') }}" class="btn btn-secondary me-2">重置</a>
        <a href="{{ url_for('add_card') }}" class="btn btn-gray me-2">添加银行卡</a>
        <a href="{{ url_for('export_cards') }}" class="btn btn-gray">导出 CSV</a>
      </div>

  <!-- 银行卡列表 -->
  <div class="card p-4 mt-4">
    <div class="d-flex justify-content-between align-items-center mb-3">
      <div class="d-flex align-items-center" style="font-size: 20px; font-weight: bold;">
        <i class="bi bi-card-list me-2" style="font-size: 24px; color: #3f51b5;"></i>
        银行卡列表
      </div>
      <div>
        <a href="{{ url_for('add_card') }}" class="btn btn-gray me-2">添加银行卡</a>
        <a href="{{ url_for('export_cards') }}" class="btn btn-gray">导出数据</a>
      </div>
    </div>

    <div class="table-responsive">
      <table class="table table-bordered align-middle table-hover">
        <thead class="table-light text-center">
          <tr>
            <th>卡号</th>
            <th>币种</th>
            <th>开卡日期</th>
            <th>开卡金额</th>
            <th>账户余额</th>
            <th>取款密码</th>
            <th>是否挂失</th>
            <th>客户编号</th>
            <th>存款编号</th>
            <th>操作</th>
          </tr>
        </thead>
        <tbody>
          {% for card in cards %}
          <tr class="text-center">
            <td>{{ card.cardID }}</td>
            <td>{{ card.curID }}</td>
            <td>{{ card.openDate }}</td>
            <td>{{ card.openMoney }}</td>
            <td>{{ card.balance }}</td>
            <td>{{ card.pass }}</td>
            <td>{{ '是' if card.IsReportLoss == '是' else '否' }}</td>
            <td>{{ card.customerID }}</td>
            <td>{{ card.savingID }}</td>
           <td>
              <a href="{{ url_for('edit_card', card_id=card.cardID) }}" class="btn btn-sm btn-secondary me-2" style="color: white;">编辑</a>
              <a href="{{ url_for('delete_card', card_id=card.cardID) }}" class="btn btn-sm btn-secondary" style="color: white;" onclick="return confirm('确定删除该银行卡？')">删除</a>
            </td>
          </tr>
          {% else %}
          <tr>
            <td colspan="10" class="text-center text-muted">暂无数据</td>
          </tr>
          {% endfor %}
        </tbody>
      </table>
    </div>
  </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', function () {
  const modeSelect = document.getElementById('mode-select');
  const fieldSelect = document.getElementById('field-select');
  const valueContainer = document.getElementById('value-container');
  const rangeContainer = document.getElementById('range-container');

  // 字段支持哪些查询模式
  const fieldSupport = {
    "cardID": ["exact", "fuzzy", "range"],
    "curID": ["exact", "fuzzy"],
    "openDate": ["exact", "fuzzy", "range"],
    "openMoney": ["exact", "range"],
    "balance": ["exact", "range"],
    "IsReportLoss": ["exact", "fuzzy"],
    "customerID": ["exact", "fuzzy", "range"],
    "savingID": ["exact", "fuzzy", "range"],
    "pass": []  // 不可查询
  };

  // 控制字段选项是否可选
  function updateFieldOptions() {
    const mode = modeSelect.value;

    for (let option of fieldSelect.options) {
      const field = option.value;
      if (!field) continue;
      if (field === 'pass') {
        option.disabled = true;
        option.title = "取款密码不可查询";
        continue;
      }
      if (!mode || fieldSupport[field]?.includes(mode)) {
        option.disabled = false;
        option.title = "";
      } else {
        option.disabled = true;
        option.title = `字段【${option.textContent}】不支持当前查询模式`;
      }
    }

    if (fieldSelect.selectedOptions.length && fieldSelect.selectedOptions[0].disabled) {
      fieldSelect.value = "";
    }
  }

  // 控制输入框显示
  function updateInputDisplay() {
    const mode = modeSelect.value;
    if (mode === 'range') {
      valueContainer.style.display = 'none';
      rangeContainer.style.display = 'block';
    } else if (mode === 'exact' || mode === 'fuzzy') {
      valueContainer.style.display = 'block';
      rangeContainer.style.display = 'none';
    } else {
      valueContainer.style.display = 'none';
      rangeContainer.style.display = 'none';
    }
  }


  // 初始化绑定
  modeSelect.addEventListener('change', () => {
    updateFieldOptions();
    updateInputDisplay();
  });

  updateFieldOptions();
  updateInputDisplay();
});

</script>


{% endblock %}
